<template lang="">
  <div id="header">
    
    <div 
      v-for="(item, index) in menuList"
      :key="'menu-content' + index"
      class="header_venueContent" 
      @mouseenter="showMenu(index)" 
      @mouseleave="hideMenu(index)"
      :style="{display: item.hasActive ? 'block' : 'none'} "
    >
      <div 
        v-if="Array.isArray(item.children)"
        class="header_venueContent_inner header_venueContent_inner2">
        <div 
          v-for="(sItem, sIndex) in item.children"
          :key="'sub-content' + sIndex"
          class="header_venueRegion"
          @click="gameItemClick(item.type, sItem)">
          <div class="header_venueContent_title" :style="{width: getDisplayImgWidth(item.children.length, item.info) + 'px' }">
            <h4 >{{ sItem.display_name }}</h4>
            <p >{{ sItem.desc }}</p>
          </div>
          <img 
            :src="sItem.cover"
            :width="getDisplayImgWidth(item.children.length, item.info)">
        </div>
       
        <div 
          v-if="item.info && item.info.subTitle"
          class="header_venueInfo">
          <h5>{{ item.info.subTitle }}</h5>
          <span>{{ $t('fanS-0') }}</span>
          <h2 class="num">{{ $t('item', [item.info.rebatePercent || 0]) }}</h2>
        </div>
      </div>
    </div>

    <div
      class="header_venueContent" style="display: none;">
      <div
        class="header_venueContent_inner header_venueContent_inner2">
        <div
          class="header_venueRegion">
          <a href="#/DptGift"
            class="">
            <div class="header_venueContent_title" style="width:
    225px;">
              <h4 >{{ $t('sheH') }}</h4>
              <p
                >{{ $t('touZ-7') }}</p>
            </div>
            <img 
              :src="getAssetsImages('home/header_discount1.png')"
              width="301">
          </a>
        </div>
        <div class="header_venueRegion">
          <a
            href="#/preferentialActivity" class="">
            <div 
              class="header_venueContent_title" style="width: 225px;">
              <h4
                >{{ $t('youH-1') }}</h4>
              <p >{{ $t('shou-6') }}</p>
            </div>
            <img
              :src="getAssetsImages('home/header_discount2.png')"
              width="301">
          </a>
        </div>
        <div class="header_venueRegion">
          <div
            class="header_venueContent_title" style="width: 225px;">
            <h4
              >{{ $t('vipT') }}</h4>
            <p >{{ $t('mian-1') }}</p>
          </div>
          <img
            :src="getAssetsImages('home/header_discount3.png')"
            width="301">
        </div>
      </div>
    </div>
    <div class="header_venueContent"
      style="display: none;">
      <div class="header_venueContent_inner
    header_venueContent_inner1">
        <a href="#/sponsor" class="">
          <div
            class="header_venueRegion header_venueRegion_center">
            <img
              :src="getAssetsImages('home/header_sponsor.png')"
              width="420">
            <div class="header_venueContent_title">
              <h4
                style="margin-top: 98px;">{{ $t('goldg-3') }}</h4>
              <p
                >{{ $t('goldg-4') }}</p>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div
      class="header_venueContent" style="display: none;">
      <div
        class="header_venueContent_inner header_venueContent_inner1">
        <div
          class="header_venueRegion header_venueRegion_center header_APP">
          <img
            :src="getAssetsImages('home/header_APP1.png')"
            width="200">
          <div class="header_venueContent_title">
            <h4
              class="fix"> Win8
              <br >
              <span
                  >{{ $t('jing-5') }}</span>
            </h4>
            <p
              >{{ $t('fuGa') }}</p>
          </div>
        </div>
        <div
          class="header_venueRegion header_venueRegion_center">
          <a
            href="#/appDownload" class="">
            <img 
              :src="getAssetsImages('home/header_APP2.png')"
              width="200">
            <div
              class="header_venueContent_title">
              <div 
                class="header_app_qrcode" style="margin-top: 40px;">
                <img 
                  :src="getAssetsImages('app_download_qrcode.png')" width="87">
              </div>
              <p
                >{{ $t('saoY') }}</p>
              <p >{{ $t('zhiC') }} {{ $t('and') }};
               {{ $t('andro-0') }} </p>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div 
      class="header_venueContent" style="display: none;">
      <div 
        class="header_venueContent_inner header_venueContent_inner1">
        <a 
          href="#/gift" class="">
          <div class="header_venueRegion
    header_venueRegion_center">
            <img 
              :src="getAssetsImages('home/header_gift.png')"
              width="438">
            <div
              class="header_venueContent_title">
              <h4 
                style="margin-top: 98px;">{{ $t('haoM') }}</h4>
              <p
                >{{ $t('haoL-0') }}</p>
            </div>
          </div>
        </a>
      </div>
    </div>

    <!-- header_active -->
    <div
      class="header">
      <div class="header_inner">
        <div
          class="header_logo">
          <a href="#/home"
            aria-current="page" class="router-link-exact-active router-link-active">
            <img :src="getAssetsImages('logo_white.png')" height="46">
            <img :src="getAssetsImages('logo.png')" height="46" style="display: none;">
          </a>
        </div>

        <div
          class="header_nemu">
          <ul >
            <li v-for="(item, index) in menuList" :key="'menu' + index" 
            @mouseenter="showMenu(index)" 
            @click="gotoPage(item.type)"
            >
              {{ item.name }}
              <i v-if="Array.isArray(item.children) && item.children.length > 0"
                aria-label="$t('tuBi-8')" class="anticon anticon-down">
                <svg viewBox="64
    64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor"
                  aria-hidden="true" focusable="false" class="">
                  <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9
    6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6
    486.1c12.8 17.6 39 17.6 51.7
    0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
                </svg>
              </i>
            </li>
          </ul>
        </div>
        
        <div class="mid_empty"></div>

        <HeaderRight />
      </div>
    </div>
  </div>
  <GlobalNotice :title="title" :content="content" :visible="noticeModalVisible" @cancel="noticeModalVisible=false" @ok="gotoNoticeDetails"/>
</template>
<script setup lang="ts">
import { ref, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { getAssetsImages, objectToQueryString } from '@/utils';
import GlobalNotice from '@/components/GlobalNotice/GlobalNotice.vue';
import HeaderRight from '@/components/Header/components/HeaderRight.vue';
import { getGameKinds, getGameList } from '@/api/game';
import { getToken } from '@/utils/token';
import { Modal } from 'ant-design-vue';
import { useI18n } from 'vue-i18n'
import { useGameInfoStore } from '@/stores/gameInfo';

const { t } = useI18n()
const title = ref<string>(t('pgDi'));
const content = ref<string>(t('zunG'));
const noticeModalVisible = ref<boolean>(false);
const { setGameKinds, updateGameType } = useGameInfoStore();

const gotoNoticeDetails = () => {
  noticeModalVisible.value = false;
  // TODO 跳转通知详情
}
const router = useRouter();
const menuList = ref([
  // {
  //   name: '首页',
  //   hasActive: false,
  // },
  {
    name: t('tiYu-0'),
    type: t('sport-0'),
    hasActive: false,
    info: {
      subTitle: t('tiYu-1'),
      subTitleEn: t('sport-1'),
      returnToTheWater: getAssetsImages('home/venue_fanshui1.png') //图片
    },
    children: [
      {
        gameName: 'Win8',
        desc: t('duoY'),
        cover: getAssetsImages('home/header_im.png')
      },
      {
        gameName: t('xiao-3'),
        desc: t('zuiZ'),
        cover: getAssetsImages('home/header_ba188.png')
      },
      {
        gameName: 'Win8MAX',
        desc: t('jing-6'),
        cover: getAssetsImages('home/header_ty.png')
      }
    ],
  },
  {
    name: t('zhen-4'),
    type: t('casin'),
    hasActive: false,
    info: {
      subTitle: t('zhen-0'),
      subTitleEn: t('live'),
      returnToTheWater: getAssetsImages('home/venue_fanshui3.png') //图片
    },
    children: [
      {
        gameName: t('agZh-0'),
        desc: t('zhuan-5'),
        cover: getAssetsImages('home/header_agin.png')
      },
      {
        gameName: t('daYo'),
        desc: t('meiN'),
        cover: getAssetsImages('home/header_bgv.png')
      },
      {
        gameName: t('ebet'),
        desc: t('shiX-0'),
        cover: getAssetsImages('home/header_ebet.png')
      },
      {
        gameName: t('xiao-4'),
        desc: t('jing-7'),
        hasProhibit: true, // 是否维护中
        cover: getAssetsImages('home/header_xj.png')
      }
    ],
  },
  {
    name: t('qiPa-1'),
    type: t('chess-0'),
    hasActive: false,
    info: {
      subTitle: t('qiPa'),
      subTitleEn: t('board'),
      returnToTheWater: getAssetsImages('home/venue_fanshui2.png') //图片
    },
    children: [
      {
        gameName: t('kaiY-0'),
        desc: t('huiJ'),
        cover: getAssetsImages('home/header_chess.png')
      },
      {
        gameName: t('imQi'),
        desc: t('wanC'),
        cover: getAssetsImages('home/header_imc.png')
      },
      {
        gameName: t('leYo'),
        desc: t('huoR'),
        cover: getAssetsImages('home/header_leg.png')
      },
    ],
  },
  {
    name: t('caiP-0'),
    type: t('lotte'),
    hasActive: false,
    children: [
      {
        gameName: t('daYo-0'),
        desc: t('feng'),
        cover: getAssetsImages('home/header_bg.png')
      },
      {
        gameName: t('vrCa-0'),
        desc: t('teSe'),
        cover: getAssetsImages('home/header_vr.png')
      },
      {
        gameName: t('lbCa'),
        desc: t('chuan-0'),
        cover: getAssetsImages('home/header_lb.png')
      }
    ],
  },
  {
    name: t('dian-9'),
    type: 'SlotMachine',
    hasActive: false,
    info: {
      subTitle: t('dian-4'),
      subTitleEn: t('slot-0'),
      returnToTheWater: getAssetsImages('home/venue_fanshui2.png') //图片
    },
    children: [
      {
        gameName: t('agBu'),
        desc: t('rang-3'),
        cover: getAssetsImages('home/header_ag_hunter.png')
      },
      {
        gameName: t('ggBu'),
        desc: t('jing-8'),
        cover: getAssetsImages('home/header_gg.png')
      },
      {
        gameName: t('pgDi-0'),
        desc: t('gaoej'),
        cover: getAssetsImages('home/header_pg.png')
      },
      {
        gameName: t('dtDi'),
        desc: t('jing-9'),
        cover: getAssetsImages('home/header_dt.png')
      },
      {
        gameName: t('hbDi'),
        desc: t('zhong-2'),
        cover: getAssetsImages('home/header_hd.png')
      },
      {
        gameName: t('mgDi'),
        desc: t('suiX'),
        cover: getAssetsImages('home/header_mg.png')
      }
    ],
  },
  {
    name: t('dian-10'),
    type: t('espor'),
    hasActive: false,
    info: {
      subTitle: t('dian-3'),
      subTitleEn: t('slot-1'),

      returnToTheWater: getAssetsImages('home/venue_fanshui1.png') //图片
    },
    children: [
      {
        gameName: t('siFa-0'),
        desc: t('reMe'),
        cover: getAssetsImages('home/header_ime.png')
      },
      {
        gameName: t('fanY'),
        desc: t('zhuL'),
        cover: getAssetsImages('home/header_fy.png')
      }
    ],
  },
]);

let hideTimer: any
const showMenu = (index: number) => {
  if (hideTimer) {
    clearTimeout(hideTimer)
  }

  menuList.value.forEach((item) => item.hasActive = false)
  menuList.value[index].hasActive = true
};
const hideMenu = (index: number) => {
  hideTimer = setTimeout(() => {
    menuList.value.forEach((item) => item.hasActive = false)
  }, 400);
};

const getDisplayImgWidth = (length: number, hasNotIntroduction?: boolean) => {
  const displayWidthMaps: any = {
    1: ['438', '438'],
    2: ['330', '330'],
    3: ['191', '316'],
    4: ['173', '173'],
    5: ['151', '151'],
    6: ['140', '140'],
  }
  const [standard, introduction] = displayWidthMaps[length] || [];
  return (hasNotIntroduction ? standard : introduction) || '100%';
}

const fetchInitData = () => {
  Promise.all([
    getGameKinds(),
    getGameList()
  ]).then((resList: any) => {
    const [ kindsRes, gameListRes ] = resList;
    let gameList: any[] = [];
    if (Array.isArray(kindsRes)) {
      setGameKinds(kindsRes);
      gameList = kindsRes.map((item) => ({
        ...item,
        hasActive: false,
        children: [],
        info: {
          subTitle: item.desc,
          subTitleEn: item.desc,
          rebatePercent: '',
          returnToTheWater: getAssetsImages('home/venue_fanshui1.png')
        },
      }))

      // 遍历所有游戏列表
      if (typeof gameListRes === 'object') {
        for (const key in gameListRes) {
          const curMenuIndex = gameList.findIndex((item) => item.type === key);
          const curGameItem  = gameListRes[key] || {};
          if (curMenuIndex > -1 && Array.isArray(curGameItem.list)) {
            gameList[curMenuIndex].children = curGameItem.list;
          }

          if (curGameItem.rebate && curGameItem.rebate.percent > -1) {
            gameList[curMenuIndex].info.rebatePercent = curGameItem.rebate.percent;
          }
        }
      }
    }
    menuList.value = gameList;
  }).catch((error: any) => {
    console.log(error);
  })

}

function isLoggedIn() {
  // 判断用户是否已经登录，这里可以根据自己的业务逻辑实现
  // 如果已经登录，返回 true，否则返回 false
  // 例如，如果用户已经登录，可以在本地存储中查找登录状态信息
  return !!getToken();
}

const gameItemClick = (gameKind: string, item: any) => {
  const { id, channel_id, name, display_name, channel_name } = item;
  console.log(id, 111);
  if (!isLoggedIn()) {
    Modal.confirm({
      title: t('wenX-1'),
      content: t('qing-20'),
      okText: t('queR-1'),
      cancelText: t('quXi'),
      onOk() {
        router.push({
          name: t('login')
        })
      },
    });
    return;
  }
  const params = {
    game_type_id: id,
    game_channel_id: channel_id,
    name: channel_name,
    display_name: display_name,
    platform: 1,
    game_kind: gameKind,
    game_channel_name: channel_name
  }
  const queryString = objectToQueryString(params);
  window.open(`#/redirect/callback?${queryString}`, '_blank');
}

function gotoPage(name: string) {
	router.push({
		name: name
	})
}

onBeforeMount(() => {
  fetchInitData();
  updateGameType();
})
</script>
<style lang="less">
#header {
    position: fixed;
    left: 0;
    z-index: 2;
    transition: background-image .5s ease,background-color .5s ease
}

#header,.header {
    width: 100%;
    height: 100px;
    top: 0
}

.header {
    position: absolute;
    background: linear-gradient(180deg, rgba(8, 19, 39, 0.38) 26.12%, rgba(25, 37, 61, 0.0266) 100%);
    z-index: 1
}

.header_inner {
    width: 1310px;
    height: 100px;
    margin: 0 auto
}

.header_inner .header_logo {
    float: left;
    height: 100px;
    line-height: 100px;
    position: relative
}

.header_inner .header_logo img {
    vertical-align: middle
}

.header_inner .header_logo:hover:after {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    // background: url(../img/head-login-git.66605440.gif) no-repeat top;
    background-size: contain;
    position: absolute;
    top: 27px;
    left: -2px
}

.header_nemu {
    float: left;
    margin-left: 40px;

    ul {
      display: flex;
      height: 100px;
      align-items: center;
      margin-bottom: 0;
    }
}

.header_nemu ul li {
    margin-right: 24px;
    color: #fff;
    font-size: 16px;
    position: relative;
    cursor: pointer
}

.header_nemu ul li:before {
    content: "";
    opacity: 1;
    position: absolute;
    top: 65%;
    width: 0;
    height: 4px;
    background-color: #fff;
    transform: skewX(-30deg);
    transition: all .5s
}

.header_nemu ul li.active:before,.header_nemu ul li:hover:before,.home_active ul li:first-child:before {
    width: 35px
}

.header_nemu ul li i {
    font-size: 12px;
    transition: all .3s ease
}

.header_nemu ul li:hover i {
    transform: rotate(180deg)
}

.mid_empty {
    width: 6px;
    height: 100px;
    float: left
}

.header_right {
    float: right
}

.header_activity {
    float: left;

    ul {
      display: flex;
      align-items: center;
      height: 100px;
      margin-bottom: 0;
    }
    p {
      margin: 0;
    }
}

.header_activity ul li {
    width: 32px;
    height: 49px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    margin-right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 1;
}

.header_activity ul li:last-child {
    width: 44px
}

.header_activity ul li img {
    margin-bottom: 8px
}

.header_activity ul li p {
    color: #fff
}

.header_loginReg {
    float: left;
    margin-left: 40px
}

.header_loginReg div {
    width: 80px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    float: left;
    margin-top: 30px;
    border-radius: 25px;
    cursor: pointer
}

.header_loginReg div:first-child {
    color: #fff;
    border: 1px solid #fff;
    margin-right: 8px
}

.header_personalInfo {
    float: left;
    margin-top: 28px
}

.header_personalInfo ul {
    float: left
}

.header_personalInfo ul li {
    float: left;
    height: 44px;
    line-height: 44px;
    text-align: center;
    padding-left: 15px;
    cursor: pointer;
    background-color: #5A88FF;
    color: #fff
}

.header_personalInfo ul li:first-child {
    border-radius: 25px 0 0 25px
}

.header_personalInfo ul li:last-child {
    border-radius: 0 25px 25px 0;
    padding-right: 15px
}

.header_personalInfo ul li a,.header_personalInfo ul li a:hover {
    color: #fff
}

.header_moneyBag {
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    margin: 0 10px;
    font-size: 12px;
    color: #fff
}

.header_moneyBag,.header_moneyBag span {
    display: flex;
    float: left
}

.header_moneyBag>div img {
    vertical-align: text-top
}

.header_moneyBag i {
    margin: 3px 0 0 5px;
    cursor: pointer
}

.header_personalHeader {
    position: relative;
    flex-grow: 1;
    display: inline-block
}

.header_personalHeader img {
    cursor: pointer
}

.header_personalHeader:hover .header_infoList {
    display: block
}

.header_infoList {
    width: 240px;
    position: absolute;
    top: 42px;
    left: -165px;
    border-radius: 10px;
    display: none
}

.header_infoList .header_infoList_inner {
    width: 100%;
    margin-top: 12px;
    background-color: #fff;
    box-shadow: 0 0 30px 0 rgba(0,0,0,.1);
    border-radius: 10px;
    position: relative
}

.header_infoList .header_infoList_inner:before {
    content: "";
    margin-left: 110px;
    left: 70px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px;
    position: absolute;
    top: -20px;
    border-color: transparent #fff transparent transparent;
    transform: rotate(90deg)
}

.header_infoList ul li a {
    width: 100%;
    line-height: 44px;
    display: inline-block;
    color: #000;
    position: relative
}

.header_currentTime {
    width: 100%;
    padding: 0 20px;
    height: 50px;
    line-height: 50px
}

.header_infoList ul {
    padding-bottom: 10px
}

.header_infoList ul li {
    width: 100%;
    height: 45px;
    line-height: 45px;
    padding: 0 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    color: #000
}

.header_infoList ul li div {
    float: left
}

.header_infoList ul li div img {
    margin-top: -2px;
    margin-right: 8px
}

.header_infoList ul li i {
    color: #b0b0b0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

.header_venueContent {
    width: 100%;
    height: 390px;

    background: linear-gradient(180deg, rgba(22,23,30,0.96) 0%, rgba(18,21,28,0.39) 100%);
    // background: linear-gradient(180deg,#b9a591,#c0ae9c 30%,#f8f8f8 90%);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    line-height: 1.5;
}

.header_venueContent_inner {
    width: 1250px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    cursor: pointer
}

.header_venueContent_inner a {
    display: contents
}

.header-venueContent-slide-enter-active {
    transition: all .8s ease
}

.header-venueContent-slide-leave-active {
    transition: all .2s cubic-bezier(1,.5,.8,1)
}

.header-venueContent-slide-enter,.header-venueContent-slide-leave-to {
    transform: translateY(-390px)
}

.header_venueContent_inner .header_venueRegion {
    position: relative;
    text-align: center;
}

.header_venueContent_inner1 .header_venueRegion {
    float: left;
    text-align: center;
} 

.header_venueContent_inner1 .header_venueRegion img {
    float: left;
    margin-right: 28px;
    max-height: 162px;
}

.header_venueContent_inner1 .header_venueContent_title {
    float: right;
    text-align: center
}

.header_venueContent_inner1 .header_venueContent_title h4 {
    font-size: 28px;
    margin-top: 82px;
    margin-bottom: 12px;

    font-size: 36px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 42px;
}

.header_venueContent_inner2 .header_venueContent_title {
    text-align: center;
    margin: 0 auto 0;
}

.header_venueContent_inner2 .header_venueContent_title h4 {
  margin-bottom: 12px;

  font-size: 30px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 42px;
  margin-bottom: 5px
}

.header_venueContent_inner .header_venueRegion img {
    cursor: pointer;
    transition: transform .3s;
    transform: translateZ(0) scale(1);
    max-height: 210px;
    width: auto;
}

.header_venueContent_inner .header_venueRegion img:hover {
    transform: translateZ(0) scale(1.05)
}

.header_venueContent_inner .header_APP h4 {
    font-size: 30px;
    font-weight: 700;
    margin-top: 40px;
    text-align: center;
    line-height: 26px
}

.header_venueContent_inner .header_APP p {
    width: 280px;
    text-align: left;
    line-height: 24px
}

.header_venueContent_inner .header_venueContent_title p {
    font-size: 18px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #AECAFF;
    line-height: 21px;
    margin-bottom: 0;
}

.header_venueContent_inner .header_venueRegion .maintain {
    width: 160px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    background-color: #b50000;
    border-radius: 25px;
    color: #fff;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.header_venueContent_inner .header_venueInfo {
    width: 144px;
}

.header_venueContent_inner .header_venueInfo h5 {
    font-size: 36px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #E7DFFF;
    line-height: 42px;
}

.header_venueContent_inner .header_venueInfo p {
    font-size: 16px;
    color: #8f8f8f;
    margin-bottom: 11px
}

.header_venueContent_inner .header_venueInfo span {
    display: inline-block;

    width: 121px;
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255,217,217,0.81);
    line-height: 23px;
}
.header_venueContent_inner .header_venueInfo .num {
  font-size: 110px;
  font-family: DIN Alternate-Bold, DIN Alternate;
  font-weight: bold;
  color: #FF3030;
  line-height: 129px;
  letter-spacing: 3px;
  text-shadow: 0px 0px 10px rgba(255,88,88,0.36);
  -webkit-text-stroke: 2px #FF3030;
  text-stroke: 2px #FF3030;
}
.header_venueContent_inner .header_venueInfo img {
    width: 100%
}

.header_venueRegion_center {
    margin: 0 auto
}

.header_app_qrcode {
    width: 105px;
    height: 105px;
    background-image: url();
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 0 auto;
    margin-bottom: 13px
}

.header_app_qrcode img {
    transform: none!important;
    transition: none!important;
    margin-right: 0;
    margin: 9px
}

.header_active {
    background: none;
    background-color: #fff;
    box-shadow: 0 6px 12px 0 rgba(0,0,0,.05)
}

.header_active .header_moneyBag span,.header_active ul li,.header_active ul li p {
    color: #000
}

.header_active .register_btn {
    color: #333!important;
    border: 1px solid
}

.fast_transfer .ant-modal-content {
    border-radius: 8px;
    display: inline-block
}

.fast_transfer .ant-modal-header {
    height: 74px;
    // background-image: url(../img/fast_transfer_bg.4a324ead.png);
    background-repeat: no-repeat;
    background-size: 102%;
    border-radius: 8px 8px 0 0
}

.fast_transfer .ant-modal-title {
    line-height: 38px;
    color: #fff;
    font-size: 22px;
    text-align: center
}

.fast_transfer .ant-modal-close {
    top: 8px;
    color: #fff;
    z-index: 1
}

.fast_transfer .ant-modal-close i {
    font-size: 22px
}

.fast_transfer .ant-modal-body {
    padding: 24px 50px
}

.fast_transfer dl {
    font-size: 16px;
    margin-bottom: 6px
}

.fast_transfer dl:last-child {
    margin-bottom: 0
}

.fast_transfer dt {
    width: 126px;
    float: left;
    line-height: 50px
}

.fast_transfer dd {
    height: 50px;
    line-height: 50px;
    position: relative
}

.fast_transfer dd span {
    position: absolute;
    top: 50%;
    left: 138px;
    transform: translateY(-50%);
    font-size: 20px;
    color: #000!important
}

.fast_transfer dd input {
    width: 232px;
    height: 50px;
    border: 1px solid #d8dce7;
    float: left;
    border-radius: 6px;
    margin-right: 8px;
    padding-left: 40px;
    color: #000
}

.fast_transfer dd button {
    width: 120px;
    height: 50px;
    float: left
}

.fast_transfer .ant-modal-footer {
    padding: 0 50px;
    margin: 20px 0
}

.fast_transfer .ant-modal-footer button {
    width: 240px;
    height: 50px;
    float: left
}

.fast_transfer .ant-modal-footer button:last-child {
    float: right
}

.fast_transfer .ant-modal-body .ant-spin-spinning {
    background-color: rgba(0,0,0,.5)
}

</style>
